---
# title: "Letter Spacing"
title: "字母间距"
# description: "Utilities for controlling the tracking (letter spacing) of an element."
description: "用于控制元素的字距（字母间距）的功能类。"
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/letterSpacing'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## 用法

<!-- Control the letter spacing of an element using the `tracking-{size}` utilities. -->
使用 `tracking-{size}` 功能类控制元素的字母间距。

```html lightBlue
<template preview>
  <div class="mb-6">
    <p class="mb-1 text-sm text-light-blue-600">.tracking-tighter</p>
    <p class="tracking-tighter text-lg text-light-blue-800">The quick brown fox jumped over the lazy dog.</p>
  </div>
  <div class="mb-6">
    <p class="mb-1 text-sm text-light-blue-600">.tracking-tight</p>
    <p class="tracking-tight text-lg text-light-blue-800">The quick brown fox jumped over the lazy dog.</p>
  </div>
  <div class="mb-6">
    <p class="mb-1 text-sm text-light-blue-600">.tracking-normal</p>
    <p class="tracking-normal text-lg text-light-blue-800">The quick brown fox jumped over the lazy dog.</p>
  </div>
  <div class="mb-6">
    <p class="mb-1 text-sm text-light-blue-600">.tracking-wide</p>
    <p class="tracking-wide text-lg text-light-blue-800">The quick brown fox jumped over the lazy dog.</p>
  </div>
  <div class="mb-6">
    <p class="mb-1 text-sm text-light-blue-600">.tracking-wider</p>
    <p class="tracking-wider text-lg text-light-blue-800">The quick brown fox jumped over the lazy dog.</p>
  </div>
  <div>
    <p class="mb-1 text-sm text-light-blue-600">.tracking-widest</p>
    <p class="tracking-widest text-lg text-light-blue-800">The quick brown fox jumped over the lazy dog.</p>
  </div>
</template>

<p class="**tracking-tighter** ...">The quick brown fox ...</p>
<p class="**tracking-tight** ...">The quick brown fox ...</p>
<p class="**tracking-normal** ...">The quick brown fox ...</p>
<p class="**tracking-wide** ...">The quick brown fox ...</p>
<p class="**tracking-wider** ...">The quick brown fox ...</p>
<p class="**tracking-widest** ...">The quick brown fox ...</p>
```

<!-- ## Responsive -->
## 响应式

<!-- To control the letter spacing of an element at a specific breakpoint, add a `{screen}:` prefix to any existing letter spacing utility. For example, use `md:tracking-wide` to apply the `tracking-wide` utility at only medium screen sizes and above. -->
要在特定的断点处控制元素的字母间距，请在任何现有的字母间距功能类前添加 `{screen}:` 前缀。例如，使用 `md:tracking-wide` 来仅在中等大小及以上的屏幕应用 `tracking-wide` 功能类。

```html
<p class="tracking-tight **md:tracking-wide** ...">The quick brown fox jumped over the lazy dog.</p>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

## 定制

### Letter Spacings

<!-- By default Tailwind provides six tracking utilities. You can change, add, or remove these by editing the `theme.letterSpacing` section of your Tailwind config. -->
默认情况下，Tailwind 提供了六个字距功能类。您可以通过编辑您的 Tailwind 配置中的 `theme.letterSpacing` 部分来改变、添加或删除这些功能类。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      letterSpacing: {
+       tightest: '-.075em',
        tighter: '-.05em',
-       tight: '-.025em',
        normal: '0',
-       wide: '.025em',
        wider: '.05em',
-       widest: '.1em',
+       widest: '.25em',
      }
    }
  }
```

### 变体

<Variants plugin="letterSpacing" name="tracking" />

### 禁用

<Disabling plugin="letterSpacing" name="tracking" />
